import { ConfigProvider, Table, TableProps } from 'antd';
import React from 'react';
import styles from './BrandTable.less';

interface DataType {
  key: string;
  name: string;
  product: string;
}

type BrandTableColumn = {
  title: string;
  dataIndex: string;
};

type BrandTableDataItem = {
  key: string;
  name: string;
  product: string;
};

type BrandTableData = [BrandTableColumn[], BrandTableDataItem[]];

type BrandTableProps = {
  TableData: BrandTableData;
  TableDataID: string;
};

const BrandTable: React.FC<BrandTableProps> = ({ TableData, TableDataID }) => {
  const columns: TableProps<DataType>['columns'] = TableData[0];
  const data: DataType[] = TableData[1];

  return (
    <div className={styles.brandTable}>
      {/* 主题变量定制 */}
      <ConfigProvider
        theme={{
          components: {
            Table: {
              colorPrimary: '#1677ff',
              borderColor: '#06398b',
              bodySortBg: '#fff',
              headerBg: '#092e6f',
              headerColor: '#fff',
              rowHoverBg: '#045a98',
            },
          },
        }}
      >
        <Table
          id={TableDataID}
          rowKey={(record) => record.key}
          columns={columns}
          dataSource={data}
          pagination={false}
          rowClassName={styles.tableBackGroundColor}
          size="middle"
          // style={{height:'28rem'}}
        />
      </ConfigProvider>
    </div>
  );
};

export default BrandTable;
